<template>
  <el-row>
    <el-col :span="16">
      <div class="nmoneyTopBox">


        <el-form :model="donatemoney" :rules="moneyRules" ref="dmoneyRef">
          <div class="dmoneyItem">
            <el-form-item class="dmoneyother" style="line-height: 40px" label="选择组织:" prop="tissue"
                          label-width="120px">
              <el-select v-model="donatemoney.tissue" class="m-2" placeholder="选择组织" size="large"
                         style="width: 400px">
                <el-option
                    v-for="item in tissue"
                    :key="item.cname"
                    :label="item.cname"
                    :value="item.cname"
                />
              </el-select>
            </el-form-item>
            <!--            <div class="nmoneyInfo">请选择金额：</div>-->
            <el-form-item class="dmoneyother" style="line-height: 40px" label="请选择金额：" prop="dmoney"
                          label-width="120px">
              <el-radio-group v-model="donatemoney.dmoney">
                <el-radio label="10" size="large" border>10元</el-radio>
                <el-radio label="20" size="large" border>20元</el-radio>
                <el-radio label="50" size="large" border>50元</el-radio>
                <el-radio label="100" size="large" border>100元</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item class="dmoneyother" style="line-height: 40px" label="其他" prop="dmoney" label-width="120px">
              <el-input v-model="donatemoney.dmoney" style=" height: 40px;width: 100px"/>
              元
            </el-form-item>

            <el-row class="mb-4" justify="center">
              <el-col :span="5">
                <el-button type="primary" plain @click="doinatePush">捐赠</el-button>
              </el-col>
            </el-row>
            <el-row class="mb-4" justify="end">
              <el-col :span="5">
                <el-checkbox v-model="donatemoney.anony" label="匿名捐赠" size="large"/>
              </el-col>
            </el-row>
          </div>
        </el-form>
      </div>
    </el-col>
    <el-col :span="8">
      <div class="warning">
        <h3>
          <el-text class="mx-1" type="warning" style="font-size: 20px">注意事项：<br>捐赠的金额是到公益组织的账户中，是非定向的
          </el-text>
        </h3>
        <p>
          <el-text class="mx-1" style="font-size: 20px">
            感谢您对我们公益组织的关注和支持！我们希望在您了解捐赠的前提下，向您说明捐赠的款项是非定向的，这意味着您的捐款不会被特定指定用于某个具体项目或领域，而是会用于全面支持和推动我们组织的公益事业。
          </el-text>
        </p>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import doThis from "@/api/getData";
import {ElMessage} from "element-plus";

export default {
  name: "DonateMoney",
  data() {
    //捐赠金额合法性校验
    var validatePrice = (rule, value, callback) => {
      if (value === '') {
        // 校验不通过
        return callback(new Error('请输入金额'))
      } else if (parseFloat(value) <= 0 || parseFloat(value) > 1000000) {
        return callback(new Error('请输有误'))
      } else if (value.split(".").length > 2 || value.split(".")[0] === null || value.split(".")[1] > 99) {
        return callback(new Error('请输有误'))
      } else {
        // 校验通过
        callback()
      }
    }
    return {
      donatemoney: {
        dmoney: '',
        anony: false,
        tissue: ''
      },

      tissue: {},
      moneyRules: {
        dmoney: [
          {type: 'number', required: true, validator: validatePrice},
          // {min: 0.01, max: 1000000, message: '输入有误，请重新输入'}
        ],
        tissue: [
          {required: true, message: '请选择机构', trigger: 'blur'},
        ]
      }
    }
  },
  methods: {
    doinatePush() {
      this.$refs['dmoneyRef'].validate((res) => {
        if (res) {
          doThis.doGet("/donatemoney/add", this.donatemoney).then(res => {
            if (res.code === '0') {
              window.open(res.data)
            } else {
              // alert("添加失败，请检查输入是否正确")
              ElMessage.error('添加失败，请检查输入是否正确')
            }

          })
        }
      })

    }
  },
  mounted() {
    this.$checkLogin()
    doThis.doGet("/company/getTissue").then(res => {
      console.log(res)
      if (res.code === "0") {
        this.tissue = res.data
      }
    })
  }
}
</script>

<style scoped>
.nmoneyInfo {
  margin: 20px 0;
}

.dmoneyother {
  line-height: 40px;
  padding: 10px;
  margin-top: 10px;
}

.nmoneyTopBox {
  width: 700px;
  margin: 20px auto;
}

h1 {
  color: #006699;
}

p {
  margin-bottom: 15px;
}

.warning {
  padding: 8px 16px;
  border-radius: 4px;
  border-left: 5px solid var(--el-color-danger);
  margin: 20px 0;
  line-height: 1.4;
  font-size: 16px;
  font-weight: 400;
}

</style>